<template>
	<view class="price-detail">
		<popupCard title="费用明细" @close="$emit('close')">
			<view class="price-detail-content">
				<view class="price-row" v-for="item in skuList" :key="item.code">
					<view class="name">
						{{item.name}}&nbsp;&nbsp;x&nbsp;&nbsp;{{item.bookNum}}
					</view>	
					<basic-price :price="item.price" size="24rpx" color="#333333" />			
				</view>	
				<view class="total">
					总价：<basic-price :price="totalPrice" size="36rpx" color="#FF5944" unitSize="30rpx"  />
				</view>					
			</view>
		</popupCard>
	</view>
</template>
<script>
import popupCard from '@/components/business/popup-card'
export default {
	name: 'price-detail',
	components: {popupCard},
	props: {
		skuList : { type: Array, default:()=>{return []} },
		totalPrice: { type: Number, default: 0 }
	},
	methods: {
	}
}
</script>
<style lang="less">
.price-detail{
	margin-bottom: @bottom_bar_height;
	.price-detail-content{
		padding: 30rpx 30rpx 0;
		.price-row{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				color: #333333;
				font-size: 28rpx;
				margin-right: 50rpx
			}
		}	
		.total{
			border-top: 1rpx solid #EAEAEA;
			margin-top:30rpx;
			padding: 30rpx 0;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #333;
			font-size: 24rpx;
		}	
	}
}
</style>
